<template>
    <el-row :gutter="20">
        <el-col :span="4">姓名：
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="6">
            <div class="grid-content ep-bg-purple" /><el-input v-model="input" style="width: 240px"
                placeholder="请输入姓名" />
        </el-col>
    </el-row>

    <el-row :gutter="20">
        <el-col :span="4">性别：
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="6">
            <div class="mb-2 flex items-center text-sm">
                <el-radio-group v-model="radio1" class="ml-4">
                    <el-radio value="1" size="large">男</el-radio>
                    <el-radio value="2" size="large">女</el-radio>
                </el-radio-group>
            </div>
            <div class="grid-content ep-bg-purple" />
        </el-col>
    </el-row>

    <el-row :gutter="20">
        <el-col :span="4">爱好：
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="6">
            <el-checkbox-group v-model="checkList">
                <el-checkbox label="吃" value="吃" />
                <el-checkbox label="喝" value="喝" />
                <el-checkbox label="玩" value="玩" />
                <el-checkbox label="乐" value="乐" />
            </el-checkbox-group>
        </el-col>
    </el-row>

    <el-row :gutter="20">
        <el-col :span="4">我的口号：
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="6">
            <el-input v-model="textarea1" style="width: 240px" autosize type="textarea" placeholder="请输入我的口号" />
            <br />
            <el-button type="primary">提交</el-button>
            
        </el-col>
    </el-row>

    



</template>



<script setup>
import { ref } from 'vue'
const input = ref('')

const radio1 = ref('1')

const checkList = ref(['Value selected and disabled', 'Value A'])

const textarea1 = ref('')



</script>


<style>
.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 16px;
}
</style>